import Vue from "vue";
import App from "./App.vue";

import FunctionalComponent from "./components/FunctionalComponent";

import components from "./components";

import directives from "./directives";

import filters from "./filters";

Vue.use(FunctionalComponent, {
  functional: true,
  render: (createElement, context) => {
    console.log(context);
    return createElement(
      "button",
      {
        ...context.data,
        on: {
          click: () => {
            context.listeners.method();
          },
        },
      },
      [
        createElement(
          "p",
          context.scopedSlots.header({
            text: "清明雨上",
          })
        ),
        ...context.children,
        createElement("p", context.slots().footer),
      ]
    );
  },
});

Vue.use(components);

Vue.use(directives);

Vue.use(filters);

// 设置为 false 以阻止 Vue 在启动时生成生产提示
Vue.config.productionTip = false;

// 设置 Vue 忽略自定义元素标签，否则抛出忘记注册全局组件或组件名称错误的警告
Vue.config.ignoredElements = ["abc"];

// 给 v-on 自定义键位别名
Vue.config.keyCodes = {
  question: 191,
};

// 设置为 true 可以启用浏览器开发者工具的性能追踪与分析功能
Vue.config.performance = true;

// 使用基础 Vue 构造器，创建一个子构造器，参数是一个包含组件选项的对象
// 其中，data 选项是特例，必须为函数
// const Extend = Vue.extend({
//   render: function (createElement) {
//     console.log(this.extend);
//     return createElement("p", this.extend);
//   },
//   data() {
//     return {
//       extend: true,
//     };
//   },
// });

const res = Vue.compile("<div><span>{{ msg }}</span><p>静态内容</p></div>");
// 将模板字符串编译为 render 函数
console.log(res.render);
// 一个数组，缓存着模板字符串中对应的静态内容，由 render 函数决定何时调用其中的静态内容渲染函数
// 貌似没生效？？一直是空数组来着。。
console.log(res.staticRenderFns);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

console.log(Vue.version);

// new Extend().$mount("#app");
